<template>
  <div class="app-container">
    <div class="mainbox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item) in userTypeBtns"
          :key="item.value"
          :label="item.buttonName"
          :name="item.value"
        >
          <div class="filter-container">
            <el-form v-show="showSearch" ref="queryForm" :model="queryParams"
                     :inline="true" label-width="68px" @submit.native.prevent>
              <el-form-item prop="appName">
                <el-input
                  v-model.trim="queryParams.appName"
                  :maxlength="30"
                  placeholder="请输入应用名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-radio-group v-model="queryParams.statusFlag">
                <el-radio-button v-for="(item,index) in statusFlagBtns" :key="index" :label="item.value">{{ item.buttonName }}</el-radio-button>
              </el-radio-group>
            </el-form>
            <div class="flex-1" />
            <div>
              <div class="flex-1" />
              <div style="display:flex;">
                <el-button v-permission="['APPLICATIONCENTER_ADD_BUTTON']" type="primary" icon="el-icon-plus"
                           @click="handleAdd">新建应用</el-button>
                <el-button v-permission="['APPLICATIONSYSTEM_CLASSIFYMANAGE_BUTTON']" @click="classManage">分类管理</el-button>
              </div>
            </div>
          </div>
          <div v-loading="loading">
            <template v-if="applicationList && applicationList.length>0">
              <el-collapse v-for="(item,index) in applicationList" :key="item.categoryId" v-model="opend"
                           @change="showCollapse(item)">
                <el-collapse-item :name="index">
                  <template slot="title">
                    <i :class="item.isActive?'el-icon-caret-right':'el-icon-caret-bottom'" style="margin:0 5px" />
                    {{ item.typeName }}
                  </template>
                  <div style="display: flex;flex-wrap: wrap;">
                    <div v-for="child in item.sysAppList" :key="child.sprocdefId" class="systemBox"
                         @click="handleAccess(child)">
                      <div class="application">
                        <div style="display: flex;justify-content: space-between;">
                          <div style="display: flex;">
                            <appIcon :icon-type="child.iconType" :app-icon="child.appIcon" :active-color="child.iconColor" />
                            <div class="appName">{{ child.appName }}</div>
                          </div>
                          <div @click.stop>
                            <template>
                              <el-dropdown :disabled="!child.editable">
                                <span @click.stop>
                                  <el-tag size="small" effect="plain" :type="child.statusFlag=='1'?'success':'info'"
                                          style="border-radius: 86px;">{{ child.statusFlag == '1'?'已发布':'未发布' }} <i class="el-icon-arrow-down" /></el-tag>
                                </span>
                                <el-dropdown-menu slot="dropdown" style="text-align:center">
                                  <el-dropdown-item v-permission="['APPLICATIONSYSTEM_RELEASE_BUTTON']" v-preventReClick="3000" style="font-size: 12px; width: 88px;"
                                                    @click.native="handleRelease(child)">{{ child.statusFlag == '1'?'取消发布':'发布' }}</el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="remark">{{ child.remark }}</div>
                      <div class="bottom-operator">
                        <div><el-button v-permission="['APPLICATIONCENTER_VISIT_BUTTON']" size="mini" type="primary"
                                        plain @click.stop="visitorApp(child)" :disabled="!child.editable">访问</el-button></div>
                        <div @click.stop>
                          <el-button v-permission="['APPLICATIONCENTER_SET_BUTTON']" size="mini" plain
                                     @click="handleSet(child)">设置</el-button>
                          <el-button v-permission="['APPLICATIONCENTER_DEL_BUTTON']" size="mini" plain
                                     @click="handleDelete(child)" :disabled="!child.editable">删除</el-button>
                          <el-button v-permission="['APPLICATIONCENTER_DELDATA_BUTTON']" size="mini" plain
                                     @click="handleDeleteData(child)" :disabled="!child.editable">删除数据</el-button>
                        </div>
                      </div>
                    </div>
                  </div></el-collapse-item>
              </el-collapse>
            </template>
            <template v-else>
              <div class="empty">
                <svg-icon icon-class="emptyTable" class="emptyImg" />
                <p class="dataText">{{ $store.getters.dataText }}</p>
              </div>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <add-application ref="addApplicationRef" />
    <application-classify ref="applicationClassifyRef" />
  </div>
</template>
<script>
import appListApi from '@/framework/api/developerCenter/application-center/applicationCenter'
import appIcon from './components/appIcon.vue'
import addApplication from './components/addApplication.vue'
import applicationClassify from './application-classify/index.vue'
import { getLowCodeAppMenuTree } from '@/framework/api/lowCode/menuTree.js'

export default {
  name: 'ApplicationCenter',
  components: {
    appIcon,
    addApplication,
    applicationClassify
  },
  data() {
    return {
      showSearch: true,
      activeName: 0,
      // activeNames: [],
      queryParams: {
        appName: '',
        userType: '',
        statusFlag: null
      },
      applicationList: [],
      userTypeBtns: [
        { buttonName: '所有应用', value: '' },
        { buttonName: '我创建的', value: '1' },
        { buttonName: '我维护的', value: '2' }
      ],
      statusFlagBtns: [
        { buttonName: '全部', value: null },
        { buttonName: '未发布', value: 2 },
        { buttonName: '已发布', value: 1 }
      ],
      opend: []
    }
  },
  watch: {
    'queryParams.appName': function () {
      this.getList()
    },
    'queryParams.statusFlag': function () {
      this.getList()
    }
  },
  created() {
    this.getList()
    // this.getMenuList()
  },
  methods: {
    // 获取低代码，所有应用的所有菜单
    // async getMenuList() {
    //   await this.$store.dispatch('lowCode/generateLowCodeRoutes', {})
    // },
    handleClick(tab, event) {
      this.activeName == '1' ? this.queryParams.userType = 1 : this.activeName == '2' ? this.queryParams.userType = 2 : this.queryParams.userType = ''
      this.getList()
    },
    toSearchStatusFlag(val) {
      this.loading = true
      this.queryParams.statusFlag = val
      this.getList()
    },
    getList() {
      this.loading = true
      appListApi.getLowCodeAppList(this.queryParams).then(({ data: response }) => {
        this.applicationList = response
        for (let i = 0; i < this.applicationList.length; i++) {
          this.opend.push(i)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    showCollapse(item) {
      item.isActive = !item.isActive
    },
    handleAdd() {
      this.$refs.addApplicationRef.openDialog('create')
    },
    classManage() {
      this.$refs.applicationClassifyRef.openDialog()
    },
    handleRelease(data) {
      const message = data.statusFlag === 2 ? '发布成功' : '取消发布成功'
      appListApi.updateStatus({ appId: data.appId, statusFlag: data.statusFlag === 1 ? 2 : 1 }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess(message)
      }).catch(() => {})
    },
    // 设计者-跳转app
    handleAccess(data) {
      const { appCode, appName, appId, statusFlag, editable } = data
      const { menuId, menuCode, menuName, formId } = data.designerMenu
      if (!editable) {
        return
      }
      const routeUrl = this.$router.resolve({
        path: '/designerTemplate',
        query: {
          appCode, appName, appId, statusFlag, menuId, menuCode, menuName, formId
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    // 访问者-跳转app
    visitorApp(data) {
      const { appCode, appName, appId } = data
      const { menuId, menuCode, menuName, formId } = data.visitorMenu
      const routeUrl = this.$router.resolve({
        path: '/visitorTemplate',
        query: {
          appCode, appName, appId, menuId, menuCode, menuName, formId
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    handleSet(data) {
      this.$refs.addApplicationRef.openDialog('update', data)
    },
    handleDelete(data) {
      this.$dtModal.confirm(`确认删除"${data.appName}"吗？删除后无法恢复`).then(() => {
        return appListApi.sysAppDelete({ appId: data.appId })
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    handleDeleteData(data) {
      this.$dtModal.confirm(`确认删除"${data.appName}"的业务数据吗？删除后无法恢复`).then(() => {
        return appListApi.deleteData({ appId: data.appId })
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除数据成功')
      }).catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss" >
.mainbox{
  background-color: #fff !important;
  margin: 16px !important;
  height: 95%;
}
.filter-container{
  min-height: 0 !important;
  box-shadow:none !important;
  padding: 0px !important;
  border-bottom: 1px solid #E4E7ED;
}
.systemBox:hover{
  box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.08);

}
.systemBox:first-child,.systemBox:nth-child(5){
  margin-left: 0px;
}
.systemBox{
  min-width: 365px;
  width: 24%;
  cursor: pointer;
  padding: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  border: 1px solid #EBEEF5;
  border-radius: 12px 12px 12px 12px;
  background: #FFFFFF;
  .application{
    .icon{
      margin: 0 auto;
      background:#FF8F1F;
      color:#fff;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 700;
      font-size: 18px;
    }
    .appName{
      margin-left: 13px;
      margin-top: 12px;
      font-size: 16px;
      color: #131414;
    }
  }
  .remark{
    position: relative;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #646A73;
    top: 0px;
    margin: 16px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
      span {
        cursor: pointer;
      }
    }
    .bottom-operator{
      height: 36px !important;
      // padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-self: flex-end;
    }
}
::v-deep .el-collapse-item__arrow {
     display: none;
  }
  ::v-deep .el-collapse{
    border: none;
  }
  .active {
    transform: rotate(-90deg);
}
.empty{
  height: calc(100vh - 60px - 60px - 40px - 16px - 16px - 16px - 60px - 16px - 80px);
  // text-align: center;
  // height: 100%;n
  // line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .emptyImg{
    width: 160px;
    height: 160px;
  }
  .dataText{
    height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #909399;
    line-height: 24px;
  }
}
</style>
